{% extends 'base.html' %}
{% load static %}

{% block title %}游戏对战{% endblock %}

{% block content %}
<div class="container-fluid">
    <div class="row">
        <!-- 游戏信息面板 -->
        <div class="col-12">
            <div class="card mb-3">
                <div class="card-header d-flex justify-content-between align-items-center">
                    <h5><i class="fas fa-gamepad"></i> 游戏 #{{ game_id }}</h5>
                    <div>
                        <span class="badge bg-info" id="gameStatus">等待开始</span>
                        <span class="badge bg-secondary" id="currentRound">第 1 回合</span>
                    </div>
                </div>
                <div class="card-body">
                    <div class="row">
                        <div class="col-md-6">
                            <div class="d-flex align-items-center">
                                <div class="avatar-placeholder bg-primary text-white rounded-circle d-inline-flex align-items-center justify-content-center me-3" style="width: 50px; height: 50px;">
                                    <i class="fas fa-user"></i>
                                </div>
                                <div>
                                    <h6 class="mb-0" id="player1Name">玩家1</h6>
                                    <small class="text-muted" id="player1Deck">卡组名称</small>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="d-flex align-items-center justify-content-end">
                                <div>
                                    <h6 class="mb-0 text-end" id="player2Name">AI对手</h6>
                                    <small class="text-muted text-end" id="player2Deck">AI卡组</small>
                                </div>
                                <div class="avatar-placeholder bg-danger text-white rounded-circle d-inline-flex align-items-center justify-content-center ms-3" style="width: 50px; height: 50px;">
                                    <i class="fas fa-robot"></i>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="row">
        <!-- 对手区域 -->
        <div class="col-12 mb-3">
            <div class="card">
                <div class="card-header">
                    <h6><i class="fas fa-robot"></i> AI对手</h6>
                </div>
                <div class="card-body">
                    <div class="row">
                        <div class="col-md-6">
                            <h6>对手手牌 (剩余: <span id="aiHandCount">5</span>张)</h6>
                            <div id="aiHand" class="d-flex flex-wrap gap-2">
                                <!-- AI手牌将在这里显示 -->
                            </div>
                        </div>
                        <div class="col-md-6">
                            <h6>本回合出牌</h6>
                            <div id="aiPlayedCard" class="text-center">
                                <div class="card-placeholder bg-light border-2 border-dashed d-flex align-items-center justify-content-center" style="height: 120px;">
                                    <span class="text-muted">等待出牌...</span>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- 对战区域 -->
        <div class="col-12 mb-3">
            <div class="card">
                <div class="card-header">
                    <h6><i class="fas fa-swords"></i> 对战区域</h6>
                </div>
                <div class="card-body">
                    <div class="row">
                        <div class="col-md-6">
                            <h6>AI出牌</h6>
                            <div id="aiBattleCard" class="text-center">
                                <div class="card-placeholder bg-light border-2 border-dashed d-flex align-items-center justify-content-center" style="height: 150px;">
                                    <span class="text-muted">等待出牌...</span>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <h6>我的出牌</h6>
                            <div id="playerBattleCard" class="text-center">
                                <div class="card-placeholder bg-light border-2 border-dashed d-flex align-items-center justify-content-center" style="height: 150px;">
                                    <span class="text-muted">请选择要出的牌...</span>
                                </div>
                            </div>
                        </div>
                    </div>
                    
                    <!-- 回合结果 -->
                    <div id="roundResult" class="text-center mt-3" style="display: none;">
                        <div class="alert alert-info border-3 shadow-lg">
                            <h3 id="roundResultText" class="mb-2">
                                <i class="fas fa-trophy"></i> 回合结果
                            </h3>
                            <div id="roundResultDetails" class="small text-muted">
                                双方出牌对比中...
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- 玩家区域 -->
        <div class="col-12">
            <div class="card">
                <div class="card-header">
                    <h6><i class="fas fa-user"></i> 我的手牌</h6>
                </div>
                <div class="card-body">
                    <div class="row">
                        <div class="col-md-8">
                            <h6>手牌 (剩余: <span id="playerHandCount">5</span>张)</h6>
                            <div id="playerHand" class="d-flex flex-wrap gap-2">
                                <!-- 玩家手牌将在这里显示 -->
                            </div>
                        </div>
                        <div class="col-md-4">
                            <h6>回合进度</h6>
                            <div class="progress mb-2">
                                <div class="progress-bar" role="progressbar" style="width: 20%" id="roundProgress"></div>
                            </div>
                            <small class="text-muted">第 <span id="currentRoundNumber">1</span> / 5 回合</small>
                            
                            <div class="mt-3">
                                <h6>比分</h6>
                                <div class="d-flex justify-content-between">
                                    <span>AI: <span id="aiScore" class="badge bg-danger">0</span></span>
                                    <span>我: <span id="playerScore" class="badge bg-primary">0</span></span>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- 游戏结束模态框 -->
    <div class="modal fade" id="gameEndModal" tabindex="-1">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title">游戏结束</h5>
                </div>
                <div class="modal-body text-center">
                    <div id="gameResultIcon" class="mb-3">
                        <!-- 胜利或失败图标 -->
                    </div>
                    <h4 id="gameResultText">游戏结果</h4>
                    <p id="gameResultDescription">游戏描述</p>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" onclick="window.location.href='/lobby/'">返回大厅</button>
                    <button type="button" class="btn btn-primary" onclick="startNewGame()">再来一局</button>
                </div>
            </div>
        </div>
    </div>
</div>
{% endblock %}

{% block scripts %}
<script>
let gameId = {{ game_id }};
let gameStatus = null;
let playerHand = [];
let aiHand = [];
let currentRound = 1;
let playerScore = 0;
let aiScore = 0;
let isPlayerTurn = true;
let gameEnded = false;
let isShowingRoundResult = false;

// 页面加载时初始化
document.addEventListener('DOMContentLoaded', function() {
    loadGameStatus();
    
    // 每2秒更新一次游戏状态
    setInterval(loadGameStatus, 2000);
});

// 加载游戏状态
async function loadGameStatus() {
    try {
        const response = await fetch(`/api/games/${gameId}/status/`);
        if (response.ok) {
            gameStatus = await response.json();
            updateGameDisplay();
        }
    } catch (error) {
        console.error('加载游戏状态失败:', error);
    }
}

// 更新游戏显示
function updateGameDisplay() {
    if (!gameStatus) return;
    
    // 更新游戏信息
    document.getElementById('gameStatus').textContent = gameStatus.status;
    document.getElementById('currentRound').textContent = `第 ${gameStatus.current_turn} 回合`;
    document.getElementById('currentRoundNumber').textContent = gameStatus.current_turn;
    
    // 更新玩家信息
    if (gameStatus.player1) {
        document.getElementById('player1Name').textContent = gameStatus.player1.nickname;
        document.getElementById('player1Deck').textContent = gameStatus.player1.deck_name;
    }
    if (gameStatus.player2) {
        document.getElementById('player2Name').textContent = gameStatus.player2.nickname;
        document.getElementById('player2Deck').textContent = gameStatus.player2.deck_name;
    }
    
    // 更新回合进度
    const progress = (gameStatus.current_turn / 5) * 100;
    document.getElementById('roundProgress').style.width = progress + '%';
    
    // 更新比分
    document.getElementById('playerScore').textContent = playerScore;
    document.getElementById('aiScore').textContent = aiScore;
    
    // 处理当前回合
    if (gameStatus.current_round) {
        updateCurrentRound(gameStatus.current_round);
    }
    
    // 处理游戏结束（只有在游戏状态为finished时才显示）
    if (gameStatus.status === 'finished' && gameStatus.winner && !gameEnded) {
        showGameEnd(gameStatus.winner);
    }
    
    // 更新手牌显示
    updateHandDisplay();
}

// 更新当前回合显示
function updateCurrentRound(round) {
    // 如果正在显示回合结果，不进行任何清空操作
    if (isShowingRoundResult) {
        return;
    }
    
    // 只有在回合未结束且双方都没有出牌时才清空对战区域
    // 如果回合已结束，保持对战区域显示状态
    if (!round.is_finished && !round.player1_card && !round.player2_card) {
        clearBattleArea();
    }
    
    // 显示AI出牌
    if (round.player2_card) {
        if (round.is_finished) {
            // 回合结束，显示完整卡牌
            displayAICard(round.player2_card);
        } else {
            // 回合未结束，显示隐藏卡牌
            displayAICardHidden();
        }
    }
    
    // 显示玩家出牌
    if (round.player1_card) {
        displayPlayerCard(round.player1_card);
    }
    
    // 注意：回合结果现在由showRoundResult函数控制，不在这里自动显示
}

// 清空对战区域
function clearBattleArea() {
    const aiContainer = document.getElementById('aiBattleCard');
    const playerContainer = document.getElementById('playerBattleCard');
    
    aiContainer.innerHTML = `
        <div class="card-placeholder bg-light border-2 border-dashed d-flex align-items-center justify-content-center" style="height: 150px;">
            <span class="text-muted">等待出牌...</span>
        </div>
    `;
    
    playerContainer.innerHTML = `
        <div class="card-placeholder bg-light border-2 border-dashed d-flex align-items-center justify-content-center" style="height: 150px;">
            <span class="text-muted">请选择要出的牌...</span>
        </div>
    `;
}

// 显示AI卡牌（完整显示）
function displayAICard(card) {
    const container = document.getElementById('aiBattleCard');
    container.innerHTML = createCardHTML(card, false);
}

// 显示AI卡牌（隐藏显示，只显示问号）
function displayAICardHidden() {
    const container = document.getElementById('aiBattleCard');
    container.innerHTML = createHiddenCardHTML();
}

// 显示玩家卡牌
function displayPlayerCard(card) {
    const container = document.getElementById('playerBattleCard');
    container.innerHTML = createCardHTML(card, false);
}


// 显示回合结果
function showRoundResult(round) {
    // 设置标志，防止其他函数干扰
    isShowingRoundResult = true;
    
    // 确保双方出牌都显示在对战区域（完整显示）
    if (round.player1_card) {
        displayPlayerCard(round.player1_card);
    }
    if (round.player2_card) {
        displayAICard(round.player2_card); // 显示完整AI卡牌
    }
    
    const resultDiv = document.getElementById('roundResult');
    const resultText = document.getElementById('roundResultText');
    const resultDetails = document.getElementById('roundResultDetails');
    
    // 构建卡牌对比信息
    let cardComparison = '';
    if (round.player1_card && round.player2_card) {
        cardComparison = `
            <div class="row mt-2">
                <div class="col-6">
                    <strong>你的卡牌:</strong><br>
                    ${round.player1_card.name} (攻击力: ${round.player1_card.attack_power})
                </div>
                <div class="col-6">
                    <strong>AI卡牌:</strong><br>
                    ${round.player2_card.name} (攻击力: ${round.player2_card.attack_power})
                </div>
            </div>
        `;
    }
    
    if (round.winner) {
        if (round.winner.id === gameStatus.player1.id) {
            resultText.innerHTML = '<i class="fas fa-trophy text-warning"></i> 你赢得了这一回合！';
            resultText.className = 'alert alert-success text-center';
            resultDetails.innerHTML = cardComparison + '<div class="mt-2"><strong class="text-success">你的攻击力更高！</strong></div>';
            playerScore++;
        } else {
            resultText.innerHTML = '<i class="fas fa-robot text-danger"></i> AI赢得了这一回合！';
            resultText.className = 'alert alert-danger text-center';
            resultDetails.innerHTML = cardComparison + '<div class="mt-2"><strong class="text-danger">AI的攻击力更高！</strong></div>';
            aiScore++;
        }
    } else {
        // 这种情况理论上不应该出现，因为后端已经取消了平局判定
        resultText.innerHTML = '<i class="fas fa-exclamation-triangle text-warning"></i> 回合结果异常！';
        resultText.className = 'alert alert-warning text-center';
        resultDetails.innerHTML = cardComparison + '<div class="mt-2"><strong class="text-warning">请联系管理员！</strong></div>';
    }
    
    resultDiv.style.display = 'block';
    
    // 更新比分显示
    updateScoreDisplay();
    
    // 5秒后隐藏结果并清空对战区域，进入下一回合
    setTimeout(async () => {
        resultDiv.style.display = 'none';
        clearBattleArea();
        
        // 清除标志
        isShowingRoundResult = false;
        
        // 检查游戏是否已经结束
        if (gameStatus.status === 'finished') {
            // 游戏已结束，显示游戏结束模态框
            showGameEnd(gameStatus.winner);
            return;
        }
        
        // 检查是否是最后1回合且游戏有winner但未设置为finished
        // 注意：AI对战中，AI获胜时gameStatus.winner是{id: null, nickname: 'AI对手'}
        if (gameStatus.status !== 'finished' && gameStatus.winner !== undefined) {
            // 这是最后1回合，先结束游戏，然后显示游戏结束界面
            await finishGame();
            return;
        }
        
        // 重置玩家回合状态，准备下一回合
        isPlayerTurn = true;
        
        // 创建下一回合
        await createNextRound();
    }, 5000);
}

// 更新比分显示
function updateScoreDisplay() {
    document.getElementById('playerScore').textContent = playerScore;
    document.getElementById('aiScore').textContent = aiScore;
}

// 创建下一回合
async function createNextRound() {
    try {
        console.log('创建下一回合');
        const response = await fetch(`/api/games/${gameId}/create_next_round/`, {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json',
                'X-CSRFToken': getCookie('csrftoken')
            }
        });
        
        if (response.ok) {
            const data = await response.json();
            console.log('下一回合创建成功:', data);
            showMessage(data.message, 'success');
            
            // 更新游戏状态
            await loadGameStatus();
        } else {
            const error = await response.json();
            console.error('创建下一回合失败:', error);
            showMessage('创建下一回合失败：' + error.error, 'error');
            
            // 即使失败也要更新游戏状态
            await loadGameStatus();
        }
    } catch (error) {
        console.error('创建下一回合网络错误:', error);
        showMessage('创建下一回合失败：网络错误', 'error');
        
        // 即使失败也要更新游戏状态
        await loadGameStatus();
    }
}

// 结束游戏
async function finishGame() {
    try {
        console.log('结束游戏');
        const response = await fetch(`/api/games/${gameId}/finish_game/`, {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json',
                'X-CSRFToken': getCookie('csrftoken')
            }
        });
        
        if (response.ok) {
            const data = await response.json();
            console.log('游戏结束成功:', data);
            showMessage(data.message, 'success');
            // 显示游戏结束界面
            showGameEnd(data.winner);
        } else {
            const error = await response.json();
            console.error('结束游戏失败:', error);
            showMessage('结束游戏失败：' + error.error, 'error');
        }
    } catch (error) {
        console.error('结束游戏网络错误:', error);
        showMessage('结束游戏失败：网络错误', 'error');
    }
}

// 获取已使用的卡牌ID（只收集玩家使用的卡牌）
function getUsedCardIds() {
    if (!gameStatus || !gameStatus.rounds) return [];
    
    const usedCardIds = [];
    gameStatus.rounds.forEach(round => {
        // 只收集玩家使用的卡牌ID
        if (round.player1_card) {
            usedCardIds.push(round.player1_card.id);
        }
        // 不收集AI使用的卡牌ID，因为AI和玩家可能有相同名称的卡牌
    });
    
    return usedCardIds;
}

// 根据ID查找卡牌
function findCardById(cardId) {
    if (!gameStatus || !gameStatus.player1 || !gameStatus.player1.deck) return null;
    
    return gameStatus.player1.deck.cards.find(card => card.id === cardId);
}

// 显示游戏结束
function showGameEnd(winner) {
    gameEnded = true;
    const modal = new bootstrap.Modal(document.getElementById('gameEndModal'));
    const resultIcon = document.getElementById('gameResultIcon');
    const resultText = document.getElementById('gameResultText');
    const resultDescription = document.getElementById('gameResultDescription');
    
    if (winner.id === gameStatus.player1.id) {
        // 玩家胜利
        resultIcon.innerHTML = '<i class="fas fa-trophy fa-3x text-warning"></i>';
        resultText.textContent = '恭喜！你获得了胜利！';
        resultDescription.textContent = `最终比分: ${playerScore} - ${aiScore}`;
    } else {
        // AI胜利
        resultIcon.innerHTML = '<i class="fas fa-robot fa-3x text-danger"></i>';
        resultText.textContent = '很遗憾，AI获得了胜利！';
        resultDescription.textContent = `最终比分: ${playerScore} - ${aiScore}`;
    }
    
    modal.show();
}

// 创建卡牌HTML
function createCardHTML(card, clickable = true, isUsed = false) {
    const elementColors = {
        'fire': 'bg-danger',
        'water': 'bg-info',
        'wood': 'bg-success',
        'metal': 'bg-warning',
        'earth': 'bg-secondary'
    };
    
    const elementColor = elementColors[card.element] || 'bg-secondary';
    const cardClass = `card ${clickable ? 'card-clickable' : ''} ${isUsed ? 'card-used' : ''}`;
    const cardStyle = `width: 100px; height: 140px; ${isUsed ? 'opacity: 0.5;' : ''}`;
    
    return `
        <div class="${cardClass}" style="${cardStyle}" ${clickable ? `onclick="playCard(${card.id})"` : ''}>
            <div class="card-body p-2 d-flex flex-column justify-content-between">
                <div class="text-center">
                    <div class="badge ${elementColor} mb-1">${card.element}</div>
                    <h6 class="card-title mb-1" style="font-size: 0.8rem;">${card.name}</h6>
                </div>
                <div class="text-center">
                    <div class="badge bg-dark">${card.star_level}★</div>
                </div>
            </div>
        </div>
    `;
}

// 创建隐藏卡牌HTML（显示问号）
function createHiddenCardHTML() {
    return `
        <div class="card" style="width: 100px; height: 140px; background: #6c757d;">
            <div class="card-body p-2 d-flex flex-column justify-content-center align-items-center">
                <i class="fas fa-question fa-3x text-white"></i>
                <small class="text-white mt-2">AI已出牌</small>
            </div>
        </div>
    `;
}

// 出牌
async function playCard(cardId) {
    if (!isPlayerTurn || gameEnded) return;
    
    // 找到要出的卡牌并立即显示
    const card = findCardById(cardId);
    if (card) {
        displayPlayerCard(card);
    }
    
    try {
        const response = await fetch(`/api/games/${gameId}/play_card/`, {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json',
                'X-CSRFToken': getCookie('csrftoken')
            },
            body: JSON.stringify({ card_id: cardId })
        });
        
        if (response.ok) {
            const data = await response.json();
            showMessage(data.message, 'success');
            isPlayerTurn = false;
            
            // 1秒后AI出牌
            setTimeout(async () => {
                await aiPlayCard();
            }, 1000);
            
        } else {
            const error = await response.json();
            showMessage('出牌失败：' + error.error, 'error');
            // 出牌失败时清空对战区域
            clearBattleArea();
        }
    } catch (error) {
        showMessage('出牌失败：网络错误', 'error');
        // 出牌失败时清空对战区域
        clearBattleArea();
    }
}

// AI出牌
async function aiPlayCard() {
    try {
        const response = await fetch(`/api/games/${gameId}/ai_play_card/`, {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json',
                'X-CSRFToken': getCookie('csrftoken')
            }
        });
        
        if (response.ok) {
            const data = await response.json();
            showMessage(data.message, 'info');
            
            // 更新游戏状态以显示AI出牌
            await loadGameStatus();
            
            // AI出牌后，回合应该已经结束，直接显示结果
            if (gameStatus && gameStatus.current_round && gameStatus.current_round.is_finished) {
                // 立即显示AI卡牌，确保用户能看到
                if (gameStatus.current_round.player2_card) {
                    displayAICard(gameStatus.current_round.player2_card);
                }
                
                // 延迟0.5秒后显示结果，给玩家时间看到AI出牌
                setTimeout(() => {
                    showRoundResult(gameStatus.current_round);
                }, 500);
            }
        } else {
            const error = await response.json();
            showMessage('AI出牌失败：' + error.error, 'error');
        }
    } catch (error) {
        showMessage('AI出牌失败：网络错误', 'error');
    }
}

// 更新手牌显示
function updateHandDisplay() {
    if (!gameStatus) return;
    
    // 显示玩家手牌
    if (gameStatus.player1 && gameStatus.player1.deck) {
        displayPlayerHand(gameStatus.player1.deck);
    }
    
    // 显示AI手牌（隐藏具体卡牌）
    if (gameStatus.player2 && gameStatus.player2.deck) {
        displayAIHand(gameStatus.player2.deck);
    }
}

// 显示玩家手牌
function displayPlayerHand(deck) {
    const container = document.getElementById('playerHand');
    const countElement = document.getElementById('playerHandCount');
    
    if (!container || !deck.cards) return;
    
    container.innerHTML = '';
    countElement.textContent = deck.cards.length;
    
    // 获取已使用的卡牌ID
    const usedCardIds = getUsedCardIds();
    
    deck.cards.forEach(card => {
        const cardElement = document.createElement('div');
        const isUsed = usedCardIds.includes(card.id);
        cardElement.innerHTML = createCardHTML(card, !isUsed, isUsed);
        container.appendChild(cardElement.firstElementChild);
    });
}

// 显示AI手牌（隐藏具体卡牌）
function displayAIHand(deck) {
    const container = document.getElementById('aiHand');
    const countElement = document.getElementById('aiHandCount');
    
    if (!container || !deck.cards) return;
    
    container.innerHTML = '';
    countElement.textContent = deck.cards.length;
    
    // 获取已使用的卡牌ID
    const usedCardIds = getUsedCardIds();
    
    deck.cards.forEach(card => {
        const isUsed = usedCardIds.includes(card.id);
        const cardElement = document.createElement('div');
        cardElement.innerHTML = `
            <div class="card" style="width: 100px; height: 140px; background: #6c757d; ${isUsed ? 'opacity: 0.5;' : ''}">
                <div class="card-body p-2 d-flex flex-column justify-content-center align-items-center">
                    <i class="fas fa-question fa-2x text-white"></i>
                </div>
            </div>
        `;
        container.appendChild(cardElement.firstElementChild);
    });
}

// 开始新游戏
function startNewGame() {
    window.location.href = '/lobby/';
}

// 获取CSRF Token
function getCookie(name) {
    let cookieValue = null;
    if (document.cookie && document.cookie !== '') {
        const cookies = document.cookie.split(';');
        for (let i = 0; i < cookies.length; i++) {
            const cookie = cookies[i].trim();
            if (cookie.substring(0, name.length + 1) === (name + '=')) {
                cookieValue = decodeURIComponent(cookie.substring(name.length + 1));
                break;
            }
        }
    }
    return cookieValue;
}

// 显示消息
function showMessage(message, type) {
    // 简单的消息显示，可以后续优化
    const alertClass = type === 'success' ? 'alert-success' : 'alert-danger';
    const alertDiv = document.createElement('div');
    alertDiv.className = `alert ${alertClass} alert-dismissible fade show position-fixed`;
    alertDiv.style.cssText = 'top: 20px; right: 20px; z-index: 9999; min-width: 300px;';
    alertDiv.innerHTML = `
        ${message}
        <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
    `;
    
    document.body.appendChild(alertDiv);
    
    // 3秒后自动移除
    setTimeout(() => {
        if (alertDiv.parentNode) {
            alertDiv.parentNode.removeChild(alertDiv);
        }
    }, 3000);
}
</script>

<style>
.card-clickable {
    cursor: pointer;
    transition: transform 0.2s;
}

.card-clickable:hover {
    transform: translateY(-5px);
    box-shadow: 0 4px 8px rgba(0,0,0,0.2);
}

.card-placeholder {
    border-radius: 8px;
}

.avatar-placeholder {
    font-size: 1.2rem;
}

.progress {
    height: 8px;
}

/* 回合结果动画效果 */
#roundResult {
    animation: fadeInScale 0.5s ease-in-out;
}

@keyframes fadeInScale {
    0% {
        opacity: 0;
        transform: scale(0.8);
    }
    100% {
        opacity: 1;
        transform: scale(1);
    }
}

/* 胜利/失败结果的特殊样式 */
.alert-success {
    background: linear-gradient(135deg, #d4edda 0%, #c3e6cb 100%);
    border-color: #28a745;
    color: #155724;
}

.alert-danger {
    background: linear-gradient(135deg, #f8d7da 0%, #f5c6cb 100%);
    border-color: #dc3545;
    color: #721c24;
}

.alert-warning {
    background: linear-gradient(135deg, #fff3cd 0%, #ffeaa7 100%);
    border-color: #ffc107;
    color: #856404;
}
</style>
{% endblock %}
